<template>
  <div class="upload-demo">
    <SingleFileUpload
      v-model="fileUrl"
      accept="image/jpeg,image/png"
      :max-size="2"
      :width="200"
      :height="200"
      placeholder="点击上传图片"
      @file-success="onFileSuccess"
      @file-error="onFileError"
      @file-change="onFileChange"
    >
      <template #tip>
        <div class="upload-tip">支持 JPG、PNG 格式，大小不超过 2MB</div>
      </template>
    </SingleFileUpload>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import SingleFileUpload from '@/components/Upload/SingleFileUpload.vue'


const fileUrl = ref('https://img1.baidu.com/it/u=2211829855,1732097925&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735318800&t=31cf4c64ee47acd8b5a8ccdae6f1c2b3')
fileUrl.value =''
const onFileSuccess = (file: File) => {
  console.log('上传成功:', file)
}

const onFileError = (error: any) => {
  console.error('上传失败:', error)
}

const onFileChange = (file: File | null) => {
  console.log('文件变更:', file)
}
</script>

<style lang="scss" scoped>

.upload-demo {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-tip {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 8px;
}
</style>